<template>
  <div style="display: flex;flex-direction: column;"  class="list-page">
    <div style="height: 40px;border-bottom: 1px solid #eeeeee">
      <span style="font-size: 20px;font-weight: bold">{{model.title}}</span>
      <span style="float:right;">
         <ButtonGroup size="s">
            <Button icon="icon-check" :disabled="!id" @click="save">保存设置</Button>
            <Button icon="icon-paper" :disabled="!id" @click="showGen=true">生成代码</Button>
<!--            <Button icon="icon-paper" :disabled="!id" @click="showGen=true">生成移动端表单页</Button>-->
          </ButtonGroup>
      </span>
    </div>
    <div style="height: 45px;padding-bottom: 5px;position: relative">
      <Tabs :datas="items" v-model="selected"></Tabs>
      <div style="position: absolute;right: 10px;z-index: 10;top:10px">
        <span v-if="selected==1&&model.columns.length>0" class="link" @click="showSort=true"><i class="icon-layers"></i>字段排序</span>
      </div>
    </div>
    <div style="flex:1;height:calc(100% - 100px);border-left: 1px solid #eeeeee;"  class="list">
      <!--字段列表-->
      <template v-if="selected==1" >
          <Table :datas="model.columns" :width="1000" :border="true" :stripe="true">
            <TableItem :width="60" title="序号" prop="$serial"></TableItem>
            <TableItem :width="120" title="代码" prop="code"></TableItem>
            <TableItem :width="180" title="名称" className="modelName">
              <template #default="{data}">
                <Input style="width: 100%;" type="text" class="no-border" v-model="data.name"/>
              </template>
            </TableItem>
            <TableItem :width="90" title="类型" prop="dataType"></TableItem>
            <TableItem :width="60" title="主键" align="center">
              <template #default="{data}">
                <Checkbox v-model="data.primaryKey"></Checkbox>
              </template>
            </TableItem>
            <TableItem :width="60" title="非空" align="center">
              <template #default="{data}">
                <Checkbox v-model="data.mandatory"></Checkbox>
              </template>
            </TableItem>
            <TableItem :width="60" title="列表" align="center">
              <template #default="{data}">
                <Checkbox v-model="data.visibleInList"></Checkbox>
              </template>
            </TableItem>
            <TableItem :width="60" title="表单" align="center">
              <template #default="{data}">
                <Checkbox v-model="data.visibleInForm"></Checkbox>
              </template>
            </TableItem>
            <TableItem :width="60" title="搜索" align="center">
              <template #default="{data}">
                <Checkbox v-model="data.searchCondition"   type="key"></Checkbox>
              </template>
            </TableItem>
            <TableItem :width="120" title="控件类型">
              <template #default="{data}">
                <Select className="no-border" dict="control" v-model="data.controlType"></Select>
              </template>
            </TableItem>
            <TableItem :width="120" title="校验规则">
              <template #default="{data}">
                <Select className="no-border" dict="verify" v-model="data.verify"></Select>
              </template>
            </TableItem>
            <TableItem :width="120" title="列表项">
              <template #default="{data}">
                <Options v-model="data.options" style="width: 120px"/>
              </template>
            </TableItem>
          </Table>
      </template>
      <!--其他设置-->
      <div v-if="selected==2" style="padding: 30px 0">
          <Form>
            <FormItem label="所属模块" readonly>
              {{model.module}}
            </FormItem>
            <FormItem label="模型类型" readonly>
              {{model.type}}
            </FormItem>
            <FormItem label="代码" readonly>
              {{model.code}}
            </FormItem>
            <FormItem label="名称" requird>
              <Input type="text" v-model="model.name"/>
            </FormItem>
            <FormItem label="标题" required>
              <Input type="text" v-model="model.title"/>
            </FormItem>
          </Form>
      </div>

    </div>
    <!--代码生成选项-->
    <Modal v-model="showGen">
      <template #header>生成代码</template>
      <Form :labelWidth="110" class="title-suffix" mode="twocolumn" style="width: 600px">
        <FormItem label="输出位置">
          <SwitchList v-model="options.output" :datas="{1:'文件生成',2:'页面输出'}"/>
        </FormItem>
        <FormItem label="基础包名">
          <Input type="text" v-model="options.basePackage"/>
        </FormItem>
        <FormItem label="覆盖原文件">
          <HSwitch v-model="options.overwrite"/>
        </FormItem>
        <FormItem label="生成VO">
          <HSwitch v-model="options.genFormVo"/>
        </FormItem>
        <FormItem label="生成实体">
          <HSwitch v-model="options.genEntity"/>
        </FormItem>
        <FormItem label="生成控制器">
          <HSwitch v-model="options.genController"/>
        </FormItem>
        <FormItem label="数据导出">
          <HSwitch v-model="options.genExport"/>
        </FormItem>
        <FormItem label="前端页面">
          <HSwitch v-model="options.genView"/>
        </FormItem>
        <FormItem label="表单模式" single>
          <SwitchList v-model="options.dialogMode" :datas="{'onecolumn':'一列','twocolumn':'两列','threecolumn':'三列'}"/>
        </FormItem>
        <FormItem label="生成菜单">
          <HSwitch v-model="options.genMenu"/>
        </FormItem>
        <FormItem label="生成权限">
          <HSwitch v-model="options.genPriv"/>
        </FormItem>
        <FormItem label="生成Mapper">
          <HSwitch v-model="options.genMapper"/>
        </FormItem>
      </Form>
      <template #footer>
        <Button class="h-btn" @click="showGen=false">取消</Button>
        <Button :loading="generating" class="h-btn h-btn-primary" @click="genCode">确定</Button>
      </template>
    </Modal>
    <Modal v-model="showSource">
      <template #header>输出代码</template>
      <Source :source="source"></Source>
      <template #footer>
        <Button class="h-btn" @click="showSource=false">确定</Button>
      </template>
    </Modal>
    <Modal v-model="showSort" hasCloseIcon hasDivider>
      <template #header>拖拽排序</template>
      <Draggable style="width: 300px" :list="model.columns" >
        <transition-group>
          <div class="bg-primary1-color" style="width: 300px;padding:5px;margin: 5px;cursor: move;display: flex" v-for="item in model.columns" :key="item.code">
            <div>{{ item.code }}</div><div style="margin-left: auto;">{{item.name}}</div>
          </div>
        </transition-group>
      </Draggable>
    </Modal>
  </div>
</template>
<script>
import {ajax} from 'framework'
import {VueDraggableNext as Draggable} from 'vuedraggable'
import {heyuiConfig,message} from 'heyui'
heyuiConfig.addDict('control',[
  {key:'Text',title:'文本框'},
  {key:'Select',title:'下拉框'},
  {key:'Checkbox',title:'多选框'},
  {key:'Radio',title:'单选框'},
  {key:'TextArea',title:'文本区'},
  {key:'Date',title:'日期选择'},
  {key:'Time',title:'时间选择'},
  {key:'DateTime',title:'日期-时间选择'},
  {key:'Switch',title:'开关'},
  {key:'SwitchList',title:'选项切换'},
  {key:'File',title:'文件上传'},
  {key:'Image',title:'图片'},
  {key:'Number',title:'数字'},
  {key:'Map',title:'地图选点'}
])
import SourceView from './sourceView.vue'
import Options from './options.vue'
export default {
  name:'Module',
  components:{Source:SourceView,Options,Draggable},
  props:{
    id:String
  },
  data(){
    let basePackage=localStorage.basePackage
    if(!basePackage){
      basePackage='com.palm'
    }
    return {
      items:{1:'字段列表',2:'设置'},
      selected:1,
      showGen:false,
      showSource:false,
      showSort:false,
      generating:false,
      source:{},
      options:{
        output:1,
        basePackage:basePackage,
        //是否覆盖输出内容
        overwrite:false,
        genController:true,
        genView:true,
        dialogMode:"twocolumn",
        genExport:false,
        genMenu:true,
        genPriv:true,
        genEntity:true,
        mobile:false,
        genMapper:false,
        genFormVo:false
      },
      model:{
        name: "",
        code: "",
        columns: [],
        title: "",
        module: ""
      }
    }
  },watch:{
    id:function(value){
      if(value){//load
        this.load(value)
      }else{
        this.model={
          name: "",
          code: "",
          columns: [],
          title: "",
          module: ""}
      }
    }
  },mounted(){
    if(this.$props.id){
      this.load(this.$props.id);
    }
  },
  methods:{
    load(v){
      ajax.get('dev/detail',{id:v}).then(d=>{
        this.model=d.data;
      })
    },
    move(data,idx){
      let arr=this.model.columns;
      let dtIdx=arr.indexOf(data)
      let next=dtIdx+idx;
      if(next<0||next>=arr.length){
        return
      }
      arr[dtIdx] = arr.splice(next, 1, arr[dtIdx])[0]
      // let temp=this.model.columns[next];
      // this.model.columns[next]=data;
      // this.model.columns[dtIdx]=temp;
    },
    save(){
      ajax.put('dev/save?id='+this.id,this.model).then(d=>{
       message("已保存")
      })
    },
    genCode(){
      localStorage.basePackage=this.options.basePackage
      this.generating=true
      this.options.id=this.id;
      ajax.post('dev/gen',this.options).then(r=>{
        this.generating=false
        if(this.options.output==2){
          this.source=r.data
          this.showSource=true
        }else{
          this.showGen=false;
        }
      })
    }
  }
}
</script>
<style>
  .gen-model-field{
    text-align: left;
    min-width: 100px;
    min-height: 20px;
    padding-left:10px;
    cursor: pointer;
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  td.modelName{
    text-overflow: inherit;
    padding: 0 5px;
  }
</style>
